What's new in Expression Blend

Article
10/10/2017

With Microsoft Expression Blend 4, you can create websites and applications based on Microsoft Silverlight 3 and Microsoft Silverlight 4 , and desktop applications based on Windows Presentation Foundation (WPF) 3.5 with Service Pack 1 (SP1) and WPF 4.

Expression Blend provides new support for prototyping, interactivity through behaviors, special Silverlight functionality, and on-the-fly sample data generation.

Expression Blend includes new behaviors that are quickly and easily configured. To support the development of line-of-business (LOB) applications, Expression Blend introduces support for Views and ViewModels.

Silverlight and WPF

Silverlight 4 and WPF 4 support

You can create and modify Silverlight 4 and WPF 4 application projects in Expression Blend. You can also upgrade a Silverlight 3 project to target Silverlight 4 , or upgrade a WPF 3.5 with Service Pack 1 (SP1) project to target WPF 4.

Compatibility with Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1)

You can still create and modify Silverlight 3 and WPF 3.5 with Service Pack 1 (SP1) application projects in Expression Blend.

Interoperability with Visual Studio

Expression Blend and Microsoft Visual Studio 2010 use the same project format. Expression Blend can convert a Visual Studio 2008 project into a Visual Studio 2010 project.

SketchFlow

Important

SketchFlow is available only in Expression Studio Ultimate.

Designers can use SketchFlow to model the navigation and composition of an application in a very visual manner. SketchFlow prototypes can be as simple as a series of sketches, but can evolve to be as real as you need them to be to communicate your design intent. All of the user interface (UI) modeling features of Expression Blend, including Photoshop importing, visual states, behaviors, and sample data, can also be used in prototyping projects.

Publish to SharePoint

Once you have created an Expression Blend SketchFlow project, you can publish your project to a Microsoft SharePoint document library. The SketchFlow project will be available to anyone who has permission to view content on the SharePoint site.

Reviewers can share their feedback with other stakeholders by publishing their feedback to the SharePoint site.

Convert feedback to work items

You can convert reviewer feedback into a Microsoft Team Foundation work item so that you can take action on it and keep track of it.

SketchFlow animation picker

The PlaySketchFlowAnimationAction behavior is used to play a SketchFlow animation in response to an event. You can use a new picker in the Properties panel to pick a SketchFlow animation for the action to control.

SketchStyles

The default Style set for a new SketchFlow project is SketchStyles. You can switch to another Style set at any time.

Naming screens

When creating a new screen or component screen in the SketchFlow map, you can name the screen immediately after creating it.

Pausing and resuming a SketchFlow animation

In Expression Blend, each frame of a SketchFlow animation contains a new Pause button. When enabled, the SketchFlow animation pauses at that frame when playing back in the SketchFlow Player. In the SketchFlow Player, there is a play/pause button that is next to each SketchFlow animation and that can be used to play, pause, or resume that animation.

Graphics and layout

Improvements to Photoshop file importing

Expression Blend can import Adobe Photoshop (.psd) files faster and with less system utilization. Also, the following layer effects can be merged with their layers:

Drop Shadow
Inner Shadow
Color Overlay
Outer Glow
Inner Glow
Gradient Overlay
Bevel & Emboss
Satin

Pixel-shader effects

In Expression Blend, you can choose from a large collection of built-in pixel-shader effects that can be animated, and that involve color manipulation, transformation, and other special effects. You can even create and share your own new effects.

Shapes

The Assets panel in Expression Blend contains a new Shapes category, including presets for the easy creation of arcs, arrows, callouts, and polygons. Shapes can be easily switched between sketch-style and regular-style rendering.

Lay items out along a path

A new feature of Expression Blend is the ability to lay out items along any path. Items can be arranged along the path according to several settings that can be animated. By animating the Start property, you can also use this feature in motion path scenarios.

Controls

New controls

Expression Blend has tooling support for the RichTextBox control in Silverlight.

Improved control styling

It's not always possible to customize a control in the context of its containing Window, Page or UserControl. When the style of a control is in another document, style editing takes place in that document, away from the context of the control. But with Expression Blend, the control instance, including its size, data context, and other property values, are all carried over to the style or template while editing. Therefore, even in editing mode, the control template looks just like it does in context.

You can edit Styles and Templates that target abstract types or types without a default constructor. Also, any XAML file that derives from such a type can be edited.

Visual states

Common WPF 4 controls are state-aware

When you create or modify a template for many common WPF 4 controls, the States panel is populated with a list of states that are ready for you to design. This is because the following WPF 4 controls are designed to work natively with the Visual State Manager, and they show the States they work with:

Button
CalendarButton
CalendarDayButton
CalendarItem
CheckBox
ComboBox
ComboBoxItem
Control
DataGrid
DataGridCell
DataGridColumnHeader
DataGridRow
DataGridRowHeader
DatePicker
DatePickerTextBox
Expander
GridSplitter
GridViewColumnHeader
ListBoxItem
PasswordBox
ProgressBar
RadioButton
RichTextBox
RepeatButton
ScrollBar
Slider
TabControl
TabItem
TextBox
Thumb
ToggleButton
ToolTip
TreeViewItem

Transitions for pixel-shader effects

You can use pixel-shader effects during state transitions. Just pick an effect as you would pick an easing function, and set its properties. The effect will perform the transition from one state to another. Examples include reveal, wipe, pixelate, ripple, and swirl.

Transitions for entering and exiting ListBox items

You can animate adding items to and removing items from a ListBox, and you can control all the details of those transitions, including easing. If you create your own ItemsControl, you can define these same states on your item container type. If you also apply a FluidMoveBehavior behavior to the items panel of the ListBox, existing items will smoothly make room for entering new items.

View and ViewModel support

Expression Blend offers new sample data, behaviors, and project templates to support the Views and ViewModels.

Using Views and ViewModels is a way to structure a Silverlight or WPF application so that user interface (UI) objects are as decoupled as possible from the application's data and behavior. This makes it easier for design tasks and development tasks to be performed independently and without breaking each other. Essentially, your UI is the View. You bind objects in the View to properties and commands of the ViewModel. The View can also call methods on the ViewModel.

Interactivity

You can add interactivity to your application, without having to write code, by using behaviors. Behaviors are reusable components that can be directly applied to any object on the artboard, and they are composed of extensible triggers, extensible actions, and other behaviors.

Behaviors can be selected from the Assets panel, but developers have a rich API that they can use to create their own triggers, actions, and behaviors for use in Silverlight and WPF projects.

You can find more information about creating your own behaviors in the Expression Blend SDK documentation available on the Help menu.

New behaviors

Important

SketchFlow is available only in Expression Studio Ultimate.

Expression Blend includes the new TranslateZoomRotateBehavior multi-touch behavior, and a PanningItems control that you can use to scroll between items by using touch. Expression Blend also has a new trigger that responds to a frame change or the pausing or completion of a SketchFlow animation, called the SketchFlowAnimationTrigger. Expression Blend has new sets of behaviors for dragging items between list boxes, for modifying menu navigation, and for preserving screen states, such as SetDataStoreValueAction and DataStoreChangedTrigger.

An exciting enhancement has been made to the FluidMoveBehavior: if you apply it to different views of the same data item, when the item moves from one view to another (for example, from a list view to a details view), it fluidly animates the transition between the two views.

New behaviors for use with applications that use the Model-View-ViewModel pattern include the following: CallMethodAction, InvokeCommandAction, and DataStateBehavior. You can use these behaviors to invoke behavior on your ViewModels, or to respond to changes to their properties.

Conditional behaviors and the data store

Any action can be associated with a set of conditions that must be met in order to execute the action. This means that with Expression Blend, you can build conditional logic into your prototypes and production applications without the need to write code. There is also a new feature known as the data store where application variables, such as the current user's role, for example, can be read from and written to so that, effectively, different parts of your application can communicate via this shared state.

New behavior components introduced as part of this feature include the conditions editor that appears in the Properties panel for every action, a SetDataStoreValueAction action that allows you to manipulate values in your data store, and a DataStoreChangedTrigger trigger that fires whenever a chosen property inside the data store is changed.

Data and resources

Expression Blend makes it easy to prototype, build, and test data-connected applications even when run-time data and resources are not available.

Design-time data from CLR types

In addition to being able to create sample data based on XML, you can create design-time sample data from your CLR types. Even if a type has no public constructor, or if it has properties with no public setter, it can still be made into design-time sample data with the Create Sample Data From Class command in the Data panel.

The Data panel provides a view of the DataContext of an object, whether design-time or run-time, and lets you drag properties, commands, and methods onto the design surface to bind your UI to them.

Design-time ViewModels

If your application uses Views and ViewModels pattern, you can use the Create Sample Data From Class command in the Data panel to generate design-time sample ViewModels so that you can continue to design your application in the context of this data.

Design-time resources

Sometimes, resources that will resolve at run time don't resolve at design time. In these cases, you can pick a resource dictionary to use at design-time while you're designing your application.

Easier element-to-element property binding

It's easier than ever to use the Advanced options in the Properties panel to bind element properties together.

Animation

Easing functions in WPF 4

You can take advantage of the power and creative expressivity of easing functions in a WPF 4 project. You can even write custom easing functions and use them in your projects.

No modifier key needed for marquee selection of keyframes

You can marquee-select keyframes in the Timeline more easily with the mouse. Previously, you had to hold down the CTRL key while dragging marquee-selected keyframes.

XAML cleanliness

Expression Blend generates less XAML with respect to animations and animation-related properties.

Projects

Databound project template

Expression Blend includes a new project template that offers a basic starting point for View and ViewModel applications.

Run project with CTRL+F5

To improve consistency with Visual Studio, you can now invoke the Run Project command by pressing either CTRL+F5 or F5.

Zip support for samples and templates

Expression Blend now supports reading item templates, project templates, and samples from Zip files, in addition to reading them from loose files and folders.